<!--
 * @Description: 
 * @Author: Devin
 * @Date: 2021-11-05 15:14:13
 * @LastEditTime: 2022-04-14 10:15:45
 * @LastEditors: Devin
 * @Reference: 
-->
<template>
  <div class="components">
    <div class="left">
      <el-card id="普通日期选择器">
        <template #header>
          <div class="el-card-header">普通日期选择器</div>
          <div class="el-card-header-tip">进行了主题色配置，默认的时间格式和显示格式，其他未做改变</div>
        </template>
        <CcDate v-model="date" @change="change"> </CcDate>&nbsp;&nbsp;&nbsp;{{ date }}
        <Code><div v-html="code.code"></div></Code>
      </el-card>
      <el-card id="设置可选时间范围">
        <template #header>
          <div class="el-card-header">设置可选时间范围</div>
          <div class="el-card-header-tip">
            canSelectDate 可选参数<br /><br />
            <code>
              canSelectDate="after"; <br />canSelectDate="before"; <br />:canSelectDate="{ type: 'range', date:
              ['2022-03-12','2022-03-15'] }"; <br />:canSelectDate="{ type: 'after' }"; <br />:canSelectDate="{ type:
              'before' }";<br />
              :canDay="true" </code
            >是否可以选择当天
            <br />
          </div>
        </template>
        可选今天之后
        <CcDate v-model="date" canSelectDate="after" @change="change" style="margin-bottom: 20px"></CcDate><br />
        可选今天之前
        <CcDate v-model="date" canSelectDate="before" @change="change" style="margin-bottom: 20px"></CcDate><br />
        可选今天及之后
        <CcDate
          v-model="date"
          canSelectDate="after"
          :canDay="true"
          @change="change"
          style="margin-bottom: 20px"
        ></CcDate
        ><br />
        可选今天及之前
        <CcDate
          v-model="date"
          canSelectDate="before"
          :canDay="true"
          @change="change"
          style="margin-bottom: 20px"
        ></CcDate
        ><br />
        可选2022-03-12---2022-03-15
        <CcDate
          v-model="date"
          :canSelectDate="{ type: 'range', date: ['2022-03-12', '2022-03-15'] }"
          @change="change"
        ></CcDate>
        <Code><div v-html="code.code1"></div></Code>
      </el-card>
    </div>
    <div class="right"><CcAnchor :sections="sections" :offset="120" width="150px"> </CcAnchor></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
import code from './code';
export default defineComponent({
  setup() {
    const state = reactive({
      date: '',
      code,
      sections: [
        { label: '普通日期选择器' },
        { label: '设置可选时间范围' }
      ]
    });
    const change = (data: any) => {
      console.log(data);
    };
    return { ...toRefs(state), change };
  }
});
</script>

<style scoped></style>
